<template>
    <el-input v-model="ename" style="width: 240px" placeholder="请输入你要查询用户姓名" />
    <el-button :icon="Search" rounded @click="pageChange">查询</el-button>
    <el-button :icon="Plus" rounded @click="addEmp">添加</el-button>
    <el-divider />
    <el-table :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column prop="eid" label="编号" width="80" />
        <el-table-column prop="ename" label="姓名" width="120" />
        <el-table-column prop="sex" label="性别" width="120" />
        <el-table-column prop="edu" label="学历" width="120" />
        <el-table-column prop="subsidy" label="提成" width="180" />
        <el-table-column prop="salary" label="工资" width="100" />
        <el-table-column prop="employed" label="入职日期" width="180" />
        <el-table-column prop="birthday" label="出生日期" width="200" />
        <el-table-column fixed="right" label="操作" min-width="220">
            <template #default>
                <el-button type="danger" size="small">
                    删除
                </el-button>
                <el-button type="warning" size="small">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <el-row>
        <el-col :span="24">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="pageChange"
                @current-change="pageChange" />

        </el-col>
    </el-row>

    <!-- 添加功能页面 -->
    <el-drawer v-model="showDrawer" title="添加员工" direction="rtl" size="50%">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="编号">
                <el-input v-model="form.eid" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.ename" placeholder="please select your zone"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-date-picker v-model="form.employed" placeholder="Pick a time" style="width: 100%" />
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker v-model="form.birthday" placeholder="Pick a time" style="width: 100%" />
            </el-form-item>
            <el-form-item label="性别">
                <el-switch v-model="form.sex" active-text="男" inactive-text="女" />
            </el-form-item>

            <el-form-item label="学历">
                <el-select v-model="form.edu" placeholder="please select your zone">
                    <el-option label="本科" value="本科" />
                    <el-option label="硕士" value="硕士" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { Search, Plus } from '@element-plus/icons-vue'

//表格数据 
let tableData = ref([]);
let form = reactive({
    eid: 1,
    ename: "",
    employed: '1990-09-09',
    birthday: '1990-09-09',
    sex: '男',
    edu: '本科'
});
let total = ref(0);
let pageSize = ref(10);
let pageNum = ref(1);
let ename = ref("");

let showDrawer = ref(false);

onMounted(() => {
    initData();
});

/**
 * 添加提交页面
 */
const onSubmit = ()=>{
    axios({
        // 表示我们的请求地址  ， 表示的是node的api接口
        url: '/api/employee/save',
        method: 'post',
        data: form
    }).then((resData) => {
        console.log(resData, "访问后台以后的数据 ");
       
        initData();
        showDrawer.value = false;
    }).catch(error => {
        console.log(error);

    });
}

/**
 * 添加功能
 */
const addEmp = () => {
    showDrawer.value = true;
}

//切页
const pageChange = () => {
    console.log('切页');
    initData();
}

let initData = () => {
    console.log(pageNum, '-->')
    axios({
        // 表示我们的请求地址  ， 表示的是node的api接口
        url: '/api/employee/list',
        method: 'get',
        params: {
            ename: ename.value,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).then((resData) => {
        console.log(resData, "访问后台以后的数据 ");
        tableData.value = resData.data.data.list;
        total.value = resData.data.data.total;
        pageSize.value = resData.data.data.pageSize;
        pageNum.value = resData.data.data.pageNum;
    }).catch(error => {
        console.log(error);

    });
}
</script>